<template>
	<view class="content">
		<view class="news-nav">
			<view class="news-navName">校庆资讯</view>
			<view class="news-more" @click="toMore">MORE <text class="news-more-ic">▶</text></view>
		</view>
		<view class="news-picNews" v-for="(item,index) in newsList" v-if="index==0" :key="index"
			:style="{backgroundImage:'url('+staticImg+'/2.jpg)'}" @click="toDetail(item.id)">
			<view class="news-picNews-bottom">
				<view class="news-picNews-pic" @tap.stop>校庆<view></view>资讯</view>
				<view class="news-picNews-title">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="news-item-box" v-for="(item,index) in newsList" :key="item.id" v-if="index>0">
			<view class="news-item" @click="toDetail(item.id)">
				<view class="news-item-icon">
					<text>■</text>
				</view>
				<view class="news-item-right">
					<view class="news-item-title">
						{{item.name}}
					</view>
					<view class="news-item-time">
						{{$u.timeFormat(item.create_time,'yyyy-mm-dd')}}
					</view>
				</view>
			</view>
			<u-line class="u-line" :hair-line="false"></u-line>
		</view>
	</view>
</template>

<script>
	import {
		getNews
	} from "@api"
	export default {
		data() {
			return {
				newsList: [],
				staticImg: this.$t.URL.staticImg,
			}
		},
		created() {
			getNews({
					page: 0,
					size: 6
				})
				.then(res => {
					console.log(res);
					this.newsList = res;
				})
		},
		methods: {
			/* 更多新闻 */
			toMore() {
				this.$Router.push({
					name: 'newsList',
					params: {
						type: 1
					}
				})
			},
			/* 跳转新闻详情页 */
			toDetail(id) {
				this.$Router.push({
					name: 'information',
					params: {
						id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 10rpx 20rpx;
	}

	.u-line {
		margin-top: 15rpx;
	}

	.news {

		&-nav {
			height: 90rpx;
			line-height: 90rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			&Name {
				font-size: 1.3em;
				font-weight: bold;
			}
		}

		&-more {
			padding-right: 10rpx;
			color: #be2b24;

			&-ic {
				font-size: 26rpx;
				margin-left: 6rpx;
			}
		}

		&-item {
			width: 100%;
			height: 135rpx;
			display: flex;
			flex-direction: row;
			padding: 20rpx;

			&-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
			}

			&-icon {
				height: 43rpx;
				line-height: 43rpx;
				font-size: 0.8em;
				color: #be2b24;
			}

			&-title {
				width: 100%;
				height: 43rpx;
				line-height: 43rpx;
				overflow: hidden;
				font-size: 1.2em;
				font-weight: 520;
			}

			&-time {
				font-size: 28rpx;
				color: #acacac;
			}
		}

		&-picNews {
			width: 100%;
			height: 400rpx;
			background-size: 100% 100%;
			position: relative;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			border-radius: 10rpx 10rpx 0;
			box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 4px rgba(0, 0, 0, .04);

			&-bottom {
				width: 100%;
				position: absolute;
				bottom: 0;
				display: flex;
				flex-direction: row;
				justify-content: left;
			}

			&-title {
				width: 82%;
				height: 120rpx;
				overflow: hidden;
				padding-left: 20rpx;
				line-height: 120rpx;
				font-size: 1.3em;
				color: #e6e6e6;
				background-color: rgba(81, 81, 81, 0.7);
			}

			&-title:hover {
				color: #ffaa00;
			}

			&-pic {
				text-align: center;
				font-size: 33rpx;
				width: 18%;
				height: 120rpx;
				line-height: 40rpx;
				color: #FFFFFF;
				padding-top: 20rpx;
				background-color: #be2b24;
			}
		}

	}
</style>
